<template>
  <el-calendar v-model="curDate">
    <template
      #dateCell="{date}"
    >
      {{ new Date(date).getDate() }}
      <div class="rest">
        <span class="word">{{ isweekend(date) ? '休' : '' }}</span>
      </div>
      <!-- {{ test(date,data) }} -->
    </template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      curDate: new Date()
    }
  },
  methods: {
    isweekend(date) {
      const day = new Date(date).getDay()
      return day === 0 || day === 6
    }
    // test(date, data) {
    //   console.log(date, data)
    // }

  }
}
</script>

<style scoped >
.rest{
    color: white;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.word {
    background-color: orange;
    font-size: 8px;
    border-radius: 50%;
    display: inline-block;

}
</style>

